<template>
  <el-container>
    <el-header>
      <el-row class="main-row">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <Upload></Upload>
                </div>
              </el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-row>
                    <el-button plain
                      >&nbsp;<svg
                        class="icon"
                        width="20"
                        height="20"
                        viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg"
                        data-v-042ca774=""
                      >
                        <path
                          fill="currentColor"
                          d="M128 320v576h576V320H128zm-32-64h640a32 32 0 0132 32v640a32 32 0 01-32 32H96a32 32 0 01-32-32V288a32 32 0 0132-32zM960 96v704a32 32 0 01-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0132-32h576a32 32 0 0132 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z"
                        ></path></svg
                      >&nbsp;新建&nbsp;&nbsp;&nbsp;</el-button
                    >
                  </el-row>
                </div></el-col
              >

              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  <el-row>
                    <el-button plain
                      ><svg
                        class="icon"
                        width="20"
                        height="20"
                        viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg"
                        data-v-042ca774=""
                      >
                        <path
                          fill="currentColor"
                          d="M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"
                        ></path></svg
                      >批量下载</el-button
                    >
                  </el-row>
                </div></el-col
              >
            </el-row>
          </div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="12"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="10"
                ><div class="grid-content bg-purple-light">
                  <FileSearch></FileSearch>
                </div>
              </el-col>
            </el-row></div
        ></el-col>
      </el-row>
    </el-header>
    <el-main>
      <FileMain />
    </el-main>
  </el-container>
</template>

<script>
import {
  ElHeader,
  ElMain,
  ElContainer,
  ElCol,
  ElRow,
  ElButton,
} from "element-plus";
import FileSearch from "./components/FileSearch.vue";
import Upload from "./components/FileUpload.vue";
import FileMain from "./components/FileMain.vue";
// import { DocumentCopy } from "@element-plus/icons-vue";
export default {
  components: {
    ElMain,
    ElContainer,
    ElHeader,
    ElCol,
    ElRow,
    FileSearch,
    Upload,
    FileMain,
    ElButton,
    // Search
  },
};
</script>

<style lang="less" scoped>
.el-container {
  padding: 0 10px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-container {
  box-sizing: border-box;
  padding: 0px 10px;
  .el-header {
    position: relative;
    // background: #b3c0d1;
    .main-row {
      position: absolute;
      margin-bottom: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      // background: blue;
      .grid-content {
        .el-row {
          margin-bottom: 20px;
        }
        .el-row:last-child {
          margin-bottom: 0;
        }
        .el-col {
          border-radius: 4px;
        }
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
        .row-bg {
          padding: 10px 0;
          // background-color: #f9fafc;
        }
      }
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
    }
    // .bg-purple-dark {
    //   background: #99a9bf;
    // }
    // .bg-purple {
    //   background: #d3dce6;
    // }
    // .bg-purple-light {
    //   background: #e5e9f2;
    // }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
}
</style>
